import React from "react";
import ThirdReportService from "containers/data-center/report/third-report/third-report.service";
import 'styles/data-center/report/third-report/third-report.scss';
import { messages, getToken } from "share/common";
import { Spin } from 'antd';
import connect from "react-redux/es/connect/connect";

class ThirdReport extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      tableUrl: '',
      isLoading: true
    }
  }

  componentDidMount() {
    const { url: id, type } = this.props.params;
    this.getTableUrl(id, type);
  }

  //获取报表类型
  getTableUrl(id, type) {
    let params = {
      id
    };
    const { token } = this.props;
    ThirdReportService.getThirdReportDetail(params)
      .then(res => {
        let tokenName = type === "MSD" ? "user_token" : "access_token";
        let tokenValue = type === "MSD" ? token.access_token : JSON.parse(getToken()).access_token;
        let tableUrl = `${res.data.reportUrl}&${tokenName}=${tokenValue}`;
        this.setState({
          tableUrl,
          isLoading: false
        })
      })
  }

  render() {
    const { isLoading, tableUrl } = this.state;
    const { params } = this.props;
    let iframeClassName = isLoading ? "report-frame report-frame-none" :
      params.type === "MSD" ? "msd-frame report-frame" : "report-frame";
    return (
      <div className="third-report-setting-wrap">
        {isLoading && <div className="loading-wrap">
          <Spin/>
          <div className="tip">{messages('data-center.key124')/*正在加载，请稍等...*/}</div>
        </div>}
        {tableUrl && <iframe
          id="thirdReportIframe"
          className={iframeClassName}
          src={tableUrl}/>}
      </div>
    )
  }
}

ThirdReport.contextTypes = {
  router: React.PropTypes.object
};

function mapStateToProps(state) {
  return {
    token: state.main.authToken,
  }
}

export default connect(mapStateToProps)(ThirdReport);
;
